import { XmNavbar, XmNoData, XmPullRefresh } from "@/components/tool";
import { observer } from "mobx-react";
import React, { Fragment, useEffect } from "react";
import { View } from "@tarojs/components";
import { usePagingQuery } from "@/path/hooks";
import { orderRecord } from "@/path/api/common";
import { Cell, Search } from "@taroify/core";
import { EnumPostion } from "../untils";
import dayjs from "dayjs";
import { BaseRouter } from "@/path/router";
import "./index.scss"
function Index() {
  const routerInfo = BaseRouter.getData<{ no: string }>() || { no: "" }
  const { pagingInfo, pagingParams, setPagingParams, initPagingQuery, loadPagingMore } = usePagingQuery(orderRecord, { no: routerInfo.no })
  useEffect(() => {
    initPagingQuery(false)
  }, [])


  return <View className="record-page bg-page">
    <XmNavbar title="核销记录" fixed={false}></XmNavbar>
    <Search className="search-bg" value={pagingParams.no} placeholder="请输入订单号查询" onChange={e => setPagingParams({ ...pagingParams, no: e.detail.value })} onSearch={_ => initPagingQuery(false)}></Search>
    <XmPullRefresh refresherLoading={pagingInfo.refresherLoading} onRefresh={initPagingQuery} onToLower={loadPagingMore} navigationStyle="custom">
      <View className="record-box">
        {pagingInfo.data.map((val, idx) => <Cell key={idx} title={<View className="s-md-2">{EnumPostion[val.point] || ""}</View>} brief={<View className="s-md">核销次数：{val.num}</View>}>
          <View className="s-sm">订单号：{val.no}</View>
          <View className="s-sm">核销时间：{dayjs(Number(val.createtime) * 1000).format("YYYY-MM-DD HH:mm")}</View>
        </Cell>)}
        <XmNoData {...pagingInfo} title="暂无数据" />
      </View>
    </XmPullRefresh>
  </View>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
